<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>

        <!-- 引入样式文件 -->
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css"> -->
        <!-- 引入 Vue 和 Vant 的 JS 文件 -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script> -->
        <link rel="stylesheet" href="../../css/index.css">
        <!-- 引入 Vue 和 Vant 的 JS 文件 -->
        <script src="../../js/vue.js"></script>
        <script src="../../js/vant.min.js"></script>

    </head>

    <body>
        <div id="app" style="background-color: #DCDEE0;">
        <!--返回按钮-->
			<!-- <div style="width: 100px;height: 40px;">
			    <span v-on:click="back">返回</span>
			</div> -->
            <van-nav-bar
              title="单元格"
              left-text="返回"
              left-arrow
			  @click-left="onClickLeft"
			  @click-right="onClickRight"
            ></van-nav-bar>
			
			<van-cell-group title="基础用法">
			  <van-cell title="单元格" value="内容" ></van-cell>
			  <van-cell title="单元格" value="内容" label="描述信息"></van-cell>
			</van-cell-group>
            
            <van-cell-group title="单元格大小">
              <van-cell title="单元格" value="内容" size="large" ></van-cell>
              <van-cell title="单元格" value="内容" size="large" label="描述信息" ></van-cell>
            </van-cell-group>
            
            <van-cell-group title="展示图标">
              <van-cell title="单元格" icon="location-o" ></van-cell>
            </van-cell-group>
            
            <van-cell-group title="只设置value">
              <van-cell value="内容" ></van-cell>
            </van-cell-group>
            
            <van-cell-group title="展示箭头">
            <van-cell title="单元格" is-link ></van-cell>
            <van-cell title="单元格" is-link value="内容" ></van-cell>
            <van-cell title="单元格" is-link arrow-direction="down" value="内容" ></van-cell>
            </van-cell-group>
			
			<van-cell-group title="页面导航">
				<van-cell title="URL 跳转" is-link url="/vant/mobile.html" ></van-cell>
				<van-cell title="路由跳转" is-link to="index" ></van-cell>
			</van-cell-group>
            
            <van-cell-group title="分组1">
              <van-cell title="单元格" value="内容" ></van-cell>
            </van-cell-group>
            <van-cell-group title="分组2">
              <van-cell title="单元格" value="内容" ></van-cell>
            </van-cell-group>
			
			<van-cell-group title="垂直居中">
				<van-cell center title="单元格" value="内容" label="描述信息" ></van-cell>
			</van-cell-group>
        </div>
        <script>
            //在#app标签下渲染一个按钮组件
            new Vue({
                el: '#app',
                
                data: {
                
                },
                
                methods: {
                    back(){
						javascript:history.back(-1);
                        //this.$router.go(-1);//返回上一层
                    },
					onClickLeft() {
						javascript:history.back(-1);
					    //vant.Toast('返回');
					},
					onClickRight() {
					    vant.Toast('按钮');
					},
                },
                
                created() {
                
                },
                //template: '<van-button type="danger">默认按钮</van-button>'
                //template: `<van-cell title="单元格" value="内容" size="large" />`
            });
            // 调用函数组件，弹出一个 Toast
            //vant.Toast('提示');
        </script>
    </body>

</html>

